import Vue from "vue";
import SvgIcon from "@/components/SvgIcon"; // svg component

// register globally
Vue.component("svg-icon", SvgIcon);

// const req = require.context("./svg", false, /\.svg$/);
// const requireAll = (requireContext) =>
//   requireContext.keys().map(requireContext);
// requireAll(req);

const req = require.context("./svg", false, /\.svg$/);
//ƒ webpackContext(req) {
// 	var id = webpackContextResolve(req);
// 	return __webpack_require__(id);
// }
function requireAll(req) {
  console.log(req.keys()); // ['./dashboard.svg', './example.svg'...]
  return req.keys().map(req); //把相对路径传给req函数，就可以导入
}

requireAll(req);

// require.context 是 Webpack 提供的一个功能，它允许开发者根据指定的目录、匹配规则动态地加载模块。这个函数返回一个特殊的上下文对象，该对象具有 keys()、resolve() 和 require() 方法，可以用来遍历和按需导入符合条件的所有模块。

// const req = require.context('./svg', false, /\.svg$/);

//    './svg'：指定了从当前文件所在目录下名为 'svg' 的子目录开始查找匹配的模块。
//     false：表示不查询子目录，只查找当前指定目录（'./svg'）下的文件。
//     /\.svg$/：这是一个正则表达式，用于匹配文件名以.svg 结尾的文件。

// 通过这种方式，我们可以一次性导入所有位于 './svg' 目录下且文件扩展名为 .svg 的 SVG 图标文件。然后可以通过调用 req.keys() 获取到匹配文件的数组，进一步使用 req(requireContextKey) 来按需加载每个模块内容。

// 例如，配合下面的代码来批量引入并注册SVG图标组件（假设这些SVG文件被Vue.js处理成了组件）：

// req.keys().forEach(key => {
//   const svgComponent = req(key).default; // 假设SVG文件导出的是默认组件
//   // 注册SVG组件或者做其他操作...
// });
// 这样做的好处是可以避免手动逐个导入大量文件，并且当需要新增或删除相关文件时，无需修改引用它们的地方，从而简化了项目管理和维护工作。
